<template>
  <el-menu router background-color="#2A3F54" text-color="#fff" active-text-color="#409EFF" :unique-opened="true"
    class="sidebar-container"  :default-active="$route.path" >
    <!-- 系统标题 -->
    <h1 class="aside-title">
      <i class="el-icon-shopping-bag"></i>
      <span>科泰购管理系统</span>
    </h1>

    <!-- 用户信息区域 -->
    <div class="aside-user">
      <el-avatar :size="60" class="user-avatar">
        <img src="https://picsum.photos/id/1005/200/200" alt="管理员头像" />
      </el-avatar>
      <div class="user-details">
        <h3 class="user-name">管理员</h3>
        <p class="user-status">在线</p>
      </div>
    </div>

    <!-- 菜单列表 -->
    <el-sub-menu index="1">
      <template #title>
        <i class="el-icon-user"></i>
        <span>会员管理</span>
      </template>
      <el-menu-item index="/user/list">
        <i class="el-icon-user-solid"></i>
        会员列表
      </el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="3">
      <template #title>
        <i class="el-icon-news"></i>
        <span>商品管理</span>
      </template>
      <el-menu-item index="/cotegory/list">
        <i class="el-icon-menu"></i>
        商品分类管理
      </el-menu-item>
      <el-menu-item index="/product/list">
        <i class="el-icon-shopping-bag-1"></i>
        商品信息管理
      </el-menu-item>
      <el-menu-item index="/product/edit">
        <i class="el-icon-circle-plus"></i>
        商品上架
      </el-menu-item>
    </el-sub-menu>

     <el-sub-menu index="4">
      <template #title>
        <i class="el-icon-news"></i>
        <span>新闻管理</span>
      </template>
      <el-menu-item index="/main/news/list">
        <i class="el-icon-document"></i>
        新闻列表
      </el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="5">
      <template #title>
        <i class="el-icon-setting"></i>
        <span>系统管理</span>
      </template>
      <el-menu-item index="/main/changepwd">
        <i class="el-icon-key"></i>
        修改密码
      </el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="2">
      <template #title>
        <i class="el-icon-s-management"></i>
        <span>新闻分类管理</span>
      </template>
      <el-menu-item index="/main/news-type/list">
        <i class="el-icon-menu"></i>
        分类列表
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup lang="ts">

</script>

<style scoped>
.sidebar-container {
  width: 240px;
  min-height: 100vh;
  border-right: 1px solid #394e64;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* 系统标题样式 */
.aside-title {
  color: #ffffff;
  font-size: 18px;
  height: 60px;
  line-height: 60px;
  margin: 0;
  padding: 0 15px;
  text-align: center;
  background-color: #394e64;
  border-bottom: 1px solid #394e64;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.aside-title i {
  font-size: 22px;
  color: #409EFF;
}

/* 用户信息区域 */
.aside-user {
  display: flex;
  align-items: center;
  padding: 20px 15px;
  border-bottom: 1px solid #394e64;
  background-color: #2A3F54;
}

.user-avatar {
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.user-avatar:hover {
  transform: scale(1.05);
}

.user-details {
  margin-left: 15px;
}

.user-name {
  margin: 0 0 5px 0;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
}

.user-status {
  margin: 0;
  font-size: 12px;
  color: #13ce66;
  display: flex;
  align-items: center;
  gap: 5px;
}

.user-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #13ce66;
}

/* 菜单样式 */
.el-sub-menu__title {
  text-align: left;
  height: 50px;
  line-height: 50px;
  padding-left: 30px !important;
  transition: all 0.2s ease;
}

.el-sub-menu__title:hover {
  background-color: rgba(0, 0, 0, 0.15) !important;
}

.el-menu-item {
  height: 45px;
  line-height: 45px;
  padding-left: 55px !important;
  transition: all 0.2s ease;
}

.el-menu-item:hover {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

.el-menu-item.is-active {
  background-color: #1f2d3d !important;
  border-left: 3px solid #409EFF;
}

/* 图标样式 */
.el-sub-menu__title i,
.el-menu-item i {
  margin-right: 12px;
  width: 20px;
  text-align: center;
  font-size: 16px;
}

/* 展开/折叠动画 */
.el-menu--collapse .el-sub-menu__title span,
.el-menu--collapse .el-sub-menu__title i:nth-child(2) {
  display: none;
}

.el-menu--collapse .el-sub-menu__title i:first-child {
  margin-right: 0;
}
</style>